<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<div id="text">1</div>
<script>
//    协议(http/https/ftp/smtp) IP 端口号(同源非跨域)
// http://www.baidu.com
// http://101.200.35.175:443/jj/jk/iy?jj=0
// 跨域  协议或者IP或者端口号不同都会涉及到跨域

$.ajax = function (opt) {
    let opts = {
        url: opt.url,
        success: opt.success || null,
        err: opt.err || function(){},
        type: opt.type || "get",
        async: opt.async || true,
        data: opt.data || {
            a: 1,
            b:2
        }
    };


    let xhr = new XMLHttpRequest();//创建Xmlhttp请求实例


    xhr.open("GET", "./data/ajax.txt?a=1&b=2", true);//methods(请求方式   url(请求地址) async(异步/同步)
console.log("xhr", xhr);//http状态码
    xhr.onreadystatechange = function(){
//        console.log("xhr.readyState",xhr.readyState);
        /*
        * 0 请求未初始化
        * 1 服务器建立连接
        * 2 请求已经接受
        * 3 请求处理中
        * 4 请求已完成, 响应已就绪
        * */
        if(xhr.readyState === 4){//请求已完成, 响应已就绪

            console.log("xhr.status",xhr);//http状态码
            console.log("xhr.status",xhr.status);//http状态码

            switch (xhr.status){
                case 200:{//正常接受到服务器数据
//                    xhr.responseText;
                    document.getElementById("text").innerHTML=xhr.responseText;
                    opts.success && opts.success();
                    break
                }
                case 300:{//正常接受到服务器数据
//                    xhr.responseText;
                    break
                }
                case 400:{//正常接受到服务器数据
//                    xhr.responseText;
                    break
                }
                case 500:{//正常接受到服务器数据
//                    xhr.responseText;
                    break
                }
            }
        }


    };
    xhr.send(opts.data)


    /*
    * GET请求和POST请求的区别
    *   传参方式: get请求是通过URL问号传参的方式
    *           post请求是通过直接发送数据的方式
    *   传递数据的大小:  由于浏览器地址栏长度限制,  get请求无法传输过大的2k数据
    *           post没有这种限制
    *
    *           get更多的是用来向服务器请求数据
    *           post更多是用来向服务器提交数据 JSON FROM BUFFER
    *
    *
    *    url传参 是明文传输 安全性相对较差
    *           安全性相对较高
             PUT 语义化 修改
             DELETE 语义化 删除
    *
    *
    * */
}
</script>
</body>
</html>